<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated" />
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'

import { ref, reactive, shallowRef } from 'vue'

import { Boot } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import placeholderModule from '@/utils/wangEditor-plugin-placeholder'
// 导入插件
Boot.registerModule(placeholderModule)

export default {
  components: { Editor, Toolbar },
  setup() {
    const editorRef = shallowRef()
    const valueHtml = ref('')

    const mode = ref('mode')
    const toolbarConfig = reactive({
      insertKeys: {
        index: 0,
        keys: ['salary', 'placeholder', '|']
      },
      excludeKeys: [
        'fullScreen'
      ]
    })
    const editorConfig = reactive({ 
      placeholder: '请输入内容...' 
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    return {
      editorRef,
      valueHtml,
      mode,
      toolbarConfig,
      editorConfig,
      handleCreated
    }
  }
}
</script>

<style scoped></style>
